<template>
  <el-dialog title="物流进度" :visible.sync="expressDialogVisible">
    <!-- 时间线组件 -->
    <el-timeline>
      <el-timeline-item v-for="(item, index) in expressInfo" :key="index" :timestamp="item.context" :color="item.color" :size="item.size">
        {{ item.context }}
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script>
import expressData from './express.js'
export default {
  data() {
    return {
      expressDialogVisible: false,
      order_id: '',
      // 物流信息
      expressInfo: ''
    }
  },
  methods: {
    // 打开对话框
    openDialog(row) {
      this.order_id = row.order_id
      this.expressDialogVisible = true
      this.getExpressInfo()
    },
    // 获取物流信息
    getExpressInfo() {
      const res = expressData
      if (res.meta.status !== 200) return this.$message.error('物流信息获取失败')
      this.expressInfo = res.data
      // 最后一条物流信息添加绿色颜色提示
      this.expressInfo[0].color = '#0bbd87'
      this.expressInfo[0].size = 'large'
    }
  }
}
</script>

<style lang="scss" scoped></style>